<template>
  <!-- 课题一首页-行政地图 -->
  <el-container ref="bigModel" class="main-model">
    <!-- <el-header> -->
      <!-- <Header /> -->
    <!-- </el-header> -->
    <el-main>
      <div class="home-model">
        <el-row style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <div class="home-model-left">

              <div>
                <!-- 下钻地图 -->
                <!-- <map1 /> -->
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 左边 -->
        <div class="leftModel" :style="{ width: leftModelShow ? '20%' : '1px' }">
          <!-- 收缩的图片 -->
          <img v-if="leftModelShow" :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="leftJ" style=""
            @click="hideleftModel">
          <img v-else :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="leftJ" style=""
            @click="showleftModel">
          <div v-show="leftModelShow" class="home-model-right">
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                当日系统任务统计
              </div>
              <div class="infoBody">
                <home1 />
              </div>
            </div>
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                网络设备位置泄露风险分布
              </div>
              <div class="infoBody">
                <home3 />
              </div>
            </div>
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                网络设备归属泄露风险分布
              </div>
              <div class="infoBody">
                <home5 />
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="rightModel" :style="{ width: rightModelShow ? '20%' : '1px' }">
          <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
            style="" @click="hideRightModel">
          <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ" style=""
            @click="showRightModel">

          <div v-show="rightModelShow" class="home-model-right">
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                APP风险分析
              </div>
              <div class="infoBody" style="background-image: url(@/views/xd/assets/xd/new/环形图.png);">
                <home2 />
              </div>
            </div>

            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                用户位置泄露分析
              </div>
              <div class="infoBody">
                <!-- <div id="barChart" ref="barChart" style="width: 100%; height: 100%" class="zhuzhuang" /> -->
                <home4 />
              </div>
            </div>

            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                用户身份信息泄露分析
              </div>
              <div class="infoBody">
                <home6 />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import home1 from "@/views/xd/components/charts/new/home1.vue";
import home2 from "@/views/xd/components/charts/new/home2.vue";
import home3 from "@/views/xd/components/charts/new/home3.vue";
import home4 from "@/views/xd/components/charts/new/home4.vue";
import home5 from "@/views/xd/components/charts/new/home5.vue";
import home6 from "@/views/xd/components/charts/new/home6.vue";
import map1 from "@/views/xd/components/charts/map.vue";
import "echarts-gl";
export default {
  name: "MapView",
  components: {  home6, home1, home2, home3, home5, home4, map1 },
  data() {
    return {
      leftModelShow: true,
      leftModelSpan: 7,
      rightModelShow: true,
      rightModelSpan: 7,
           infoHeight: 340,
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;
  },
  created() { },
  methods: {
    toterminalManagement() {
      this.$router.push("/xsystem/terminalManagement");
    },
    showapk() {
      this.$router.push("/xsystem/apk");
    },
    showdata() {
      this.$router.push("/xsystem/data");
    },

    hideleftModel() {
      this.leftModelShow = false;
      this.leftModelSpan = 0;
      this.rightModelSpan = 24;
    },
    showleftModel() {
      this.leftModelShow = true;
      this.leftModelSpan = 7;
      this.rightModelSpan = 17;
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 7;
      this.leftModelSpan = 17;
    },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {

  border-radius: 5px;
  padding: 5px;
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-model-right {
  .infoModel {
    position: relative;

    .infoTitle {
      padding: 2px 10px;
      color: #ffffff;
      font-size: 20px;
      font-weight: 700;
      // border-top-left-radius: 30px;
      // background-color: rgb(21, 69, 131);
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .infoBody {
      height: 100%;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.rightModel {
  position: absolute;
  right: 0;
  top: 0;
  // width: 20%;
  height: 100%;
}

.leftModel {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 100%;
}

.rightJ {
  left: -40px;
  // background-color: #fff;
}

.leftJ {
  right: -30px;
  position: absolute;
  top: 50%;
  // width: 20px;
  height: 100%;
  transform: translate(0, -50%);
  z-index: 1000;
  cursor: pointer;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.el-main {
  height: 1000px;
  background-image: url(~@/assets/xd/new/homebg.png);
  background-color: #094294;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // padding: 0!important;
}

.el-header {
  // height: auto !important;
  padding: 0px;
  z-index: 10;
}

.btn {
  position: absolute;
  right: 20%;
  z-index: 999;
  font-size: 20px;
}
</style>
